/* 我的评论 */
<template>
<div class="MyComments">
    <scroller :on-infinite="infinite" ref="myscroller" class="MyCommentsWrap">
        <div v-for="(item,index) in myCommentList" :key="index">
            <!-- 点赞 -->
            <div class="item" v-if="item.action == 1" @click="goTocommentDetail(item.bodyId,item.bodyType)">
                <div class="itemLeft">
                    <!-- 用户头像 -->
                    <div class="userAvage">
                        <img :src="item.portrait.indexOf('http') != -1 ? item.portrait : imgUrl+item.portrait" />
                    </div>
                    <!-- 用户评论 -->
                    <div class="userComments">
                        <div class="userNameBox">
                            <span class="userName">{{item.nick}}</span>
                            <span class="userTime">{{item.createTime}}</span>
                        </div>
                        <div class="replyWrap">
                            <div class="love">
                                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_like_new@2x.png" />
                            </div>
                            <div class="replyWrapWord">点赞了你的评论</div>
                        </div>
                        <div class="commentSource">{{item.toUserNick}}：{{item.commentContent}}</div>
                    </div>
                </div>
                <div class="itemRight">
                    <img :src="item.bodyImgUrl" />
                </div>
            </div>
            <!-- 我评论音频 -->
            <div class="item" v-if="item.action == 3" @click="goTocommentDetail(item.bodyId,item.bodyType) ">
                <div class="itemLeft">
                    <!-- 用户头像 -->
                    <div class="userAvage">
                        <img :src="item.portrait.indexOf('http') != -1 ? item.portrait : imgUrl+item.portrait" />
                    </div>
                    <!-- 用户评论 -->
                    <div class="userComments">
                        <div class="userNameBox">
                            <span class="userName">{{item.nick}}</span>
                            <span class="userTime">{{item.createTime | getBeforeTime}}</span>
                        </div>
                        <!-- 达人榜 -->
                        <template v-if="item.type==1">
                          <div class="replyWrap">
                              <div class="replyWrapWord">我 评论 栏目: {{item.commentContent}}</div>
                          </div>
                          <div class="commentSource">栏目《{{item.bodyTitle}}》</div>
                        </template>
                        <!-- 音频 -->
                        <template v-if="item.type==2">
                            <div class="replyWrap">
                                <div class="replyWrapWord">我 评论 合辑: {{item.commentContent}}</div>
                            </div>
                            <div class="commentSource">合辑《{{item.bodyTitle}}》</div>
                        </template>
                        <!-- 栏目 -->
                        <template v-if="item.type==3">
                            <div class="replyWrap">
                                <div class="replyWrapWord">我 评论 音频: {{item.commentContent}}</div>
                            </div>
                            <div class="commentSource">音频《{{item.bodyTitle}}》</div>
                        </template>
                        <!-- 合辑 -->
                        <template v-if="item.type==4">
                            <div class="replyWrap">
                                <div class="replyWrapWord">
                                    我 评论 达人榜:
                                    {{item.commentContent}}
                                </div>
                            </div>
                            <div class="commentSource">达人榜《{{item.bodyTitle}}》</div>
                        </template>
                        <!-- 评论 -->
                        <template v-if="item.type==5">
                            <div class="replyWrap">
                                <!-- 我评论别人/别人回复我 -->
                                <div class="replyWrapWord" style="width:250px;word-wrap:break-word">
                                    {{item.userId == myId?'我 回复':'回复 你'}}
                                    {{item.toUserNick}}：{{item.commentContent}}
                                </div>
                            </div>
                            <!-- 别人的评论 -->
                            <div class="commentSource">{{item.toUserNick}}：{{item.commentedContent}}</div>
                        </template>
                    </div>
                </div>
                <div class="itemRight">
                    <img :src="item.bodyImgUrl" />
                </div>
            </div>
        </div>
        <!-- <div v-if="lastPage" class="noDataClass">没有更多数据了</div> -->
    </scroller>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import url from "@/router/http_conf.js"
export default {
    name: "MyComments",
    components: {},
    data() {
        return {
            myCommentList: [],
            lastPage: null,
            pageNumber: 1,
            myId: "",
            noData: false,
            imgUrl: url
        };
    },
    created() {
        this.myCommentListData();
        window.addEventListener('mousewheel',this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('mousewheel',this.handleScroll)
    },
    methods: {
        handleScroll(e){
          let that = this  //此this指向的是vue
          console.log(e.wheelDelta)
          if (e.wheelDelta < 0) {
              that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
          } else {
            that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
          }
        },
        // 获取评论数据
        myCommentListData() {
            controller
                .myCommentList({
                    page: this.pageNumber,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取评论数据", res);
                    let myCommentList = this.myCommentList;
                    res.baseData.list.map((item) => {
                        myCommentList.push(item);
                    });
                    this.myCommentList = myCommentList;
                    this.lastPage = res.baseData.lastPage;
                    this.pageNumber = res.baseData.pageNumber;
                });
        },
        // 上拉加载
        infinite(done) {
          setTimeout(() => {
            if (this.lastPage) {
              this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              console.log("进行下一次加载操作");
              this.lastPage = true;
              this.pageNumber++;
              this.myCommentListData();
              done(); //进行下一次加载操作
            }
          }, 1500);
        },
        // 跳转到评论详情页
        goTocommentDetail(bodyId, bodyType) {
            console.log("跳转到评论详情页", bodyId, bodyType);
            this.$router.push({
                path: "/Comment?rid=" + bodyId + "&type=" + bodyType
            })
        },
    },
};
</script>

<style lang="scss" scoped>
// 无数据
.noDataClass {
    text-align: center;
    width: 100%;
    line-height: 45px;
    color: #ccc;
    font-size: 2;
    min-width: 640px;
    max-width: 960px;
    margin: 87px auto 0;
}

/* 有数据 */
.MyComments {
    // width: 750px;
    min-width: 640px;
    max-width: 960px;
    margin: 87px auto 0;
    /deep/ ._v-container{
      left: 50%;
      transform: translateX(-50%);
      ._v-content{
        padding-bottom: 40px;
      }
    }
    .MyCommentsWrap {
        width: 100%;
        height: 1250px;
        padding: 0 25px;
        box-sizing: border-box;
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;


        .item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 2px solid #f2f2f2;

            .itemLeft {
                display: flex;

                // align-items: center;
                /* 用户头像 */
                .userAvage {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 17px;
                }

                .userAvage img {
                    width: 100%;
                    height: 100%;
                }

                /* 用户评论 */
                .userComments {
                    display: flex;
                    flex-direction: column;
                    padding: 10px 0;

                    .userName {
                        font-size: 30px;
                        color: #333333;
                        margin-right: 24px;
                    }

                    .userTime {
                        font-size: 24px;
                        color: #a8acbb;
                    }
                }

                /* 回复 */
                .replyWrap {
                    margin: 21px 0 17px;
                    color: #333333;
                    font-size: 26px;
                    display: flex;
                    align-items: center;

                    .love {
                        width: 28px;
                        height: 28px;
                        margin-right: 12px;
                    }

                    .replyWrapWord {
                        font-size: 26px;
                        color: #333333;
                        width: 80%;
                        word-wrap: break-word;
                    }
                }

                /* 评论来源 */
                .commentSource {
                    font-size: 26px;
                    color: #a8acbb;
                }
            }

            /* 音频图片 */
            .itemRight {
                width: 100px;
                height: 100px;
                border-radius: 4px;
                overflow: hidden;
            }
        }
    }
}

img {
    width: 100%;
    height: 100%;
}
</style>
